<template>
  <div class="search">
    <Options/>
    <div class="search-box">

      <div class="title">
        <div class="menu" @click="back">
          <i class="iconfont icon-link"></i>
          K.B商店
        </div>
        <i class="iconfont gengduo icon-more"></i>
        <p class="type">搜索商品</p>
      </div>

      <div class="top">
        <input @keydown.enter="goSearch" class="ipt" v-model="keyword" type="text">
        <div @click="goSearch" class="srh-btn"><i class="iconfont fdj icon-search"></i>寻找好物</div>
      </div>
      <div class="bar">
        <div @click="isChoose=true" :class="isChoose ? 'filter c333':'filter'">推荐</div>
        <div @click="handlePrice" :class="!isChoose ? 'filter c333':'filter'">
          价格
          <i v-show="isShow && !isChoose" class="iconfont icon-moreunfold"></i>
          <i v-show="!isShow && !isChoose" class="iconfont icon-less"></i>
        </div>
      </div>
      <div class="result">
        搜索结果：
      </div>
      <div v-if="isChoose" class="list">
        <Item v-for="item of list" :key="item._id" :item="item"/>
      </div>
      <div v-if="!isChoose" class="list">
        <Item v-for="item of sortList" :key="item._id" :item="item"/>
      </div>
      
      <div class="sorry" v-if="showSorry">
        很抱歉！没有您要的商品！
      </div> 
    </div>
    
  </div>
</template>

<script>
import KeyboardHttp from '../../models/KeyboardHttp.js'
import Item from '../../components/Item'
import Options from '../../components/Options'

export default {
  name:'Search',
  data() {
    return {
      keyword:this.$route.query.keyword,
      list:[],
      sortList:[],
      isChoose:true,
      isShow:true,
      showSorry:false
    }
  },
  components:{
    Item,
    Options
  },
  mounted() {
    this.$bus.$emit('remove')
    KeyboardHttp.getSearch(this.$route.query.keyword).then(res=>{
      this.list = res.data.arr
      if(!res.data.arr){
        this.showSorry = true
      }
    })
  },
  methods:{
    goSearch(){
      window.open(`/search?keyword=${this.keyword}`, '_top').close()
    },
    handlePrice(){
      this.isChoose=false
      this.isShow = !this.isShow
      var list = JSON.parse(JSON.stringify(this.list))
      if(this.isShow){
        this.sortList = list.sort((a,b)=> b.price - a.price)
      }else{
        this.sortList = list.sort((a,b)=> a.price - b.price)
      }
    }
  }
}
</script>

<style scoped>
  .search-box{
    width: 980px;
    margin: 0 auto;
  }
  .search{
    padding-top: 70px;
  }
   .title{
    display: flex;
    align-items: flex-end;
    margin-top: 60px;
    margin-bottom: 15px;
  }
  .menu{
    font-size: 18px;
    color: #596481;
    cursor: pointer;
  }
  .gengduo{
    font-size: 22px;
    font-weight: 800;
    margin: 0 20px;
  }
  .type{
    font-size: 36px;
    color: #596481;
  }
  .top{
    position: relative;
  }
  .ipt{
    width: 100%;
    border: none;
    border-bottom: 1px solid #222;
    background: none;
    outline: none;
    color: #222;
    font-size: 38px;
    font-weight: 200;
  }
  .srh-btn{
    position: absolute;
    right: 0;
    bottom: 10px;
    width: 103px;
    height: 38px;
    background: #2e2e2e;
    line-height: 38px;
    padding-left: 35px;
    color: #fff;
    font-size: 14px;
    cursor: pointer;
    box-sizing: border-box;
  }
  .fdj{
    position: absolute;
    left: 10px;
    font-size: 18px;
  }
  .list{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  .bar{
    box-shadow: 0 3px 4px rgb(152 166 209 / 17%);
    color: #596481;
    padding: 0 20px;
    background: #fff;
    display: flex;
    align-items: center;
    margin: 40px 0;
  }
  .filter{
    height: 40px;
    color: #596481;
    padding: 11px 30px;
    cursor: pointer;
    font-size: 16px;
  }
  .c333{
    color: #333 !important;
    font-weight: 800;
  }
  .result{
    font-size: 24px;
    margin-bottom: 30px;
  }
  .sorry{
    height: 200px;
    text-align: center;
    line-height: 200px;
    color: #596481;
    font-size: 40px;
  }
</style>